import { useState, useEffect, useRef } from 'react'
import DarkBtn from '../../../../../../common/DarkBtn';
import { BarChartOutlined, CloseOutlined, FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons';
import DarkCard from '../../../../../../common/DarkCard';
import { Button, Col, Row, Select, Table } from 'antd';
import usePanelKey from '../../../../../../common/BusinessMap/usePanelKey';
import useBusinessMap from '../../../../../../common/BusinessMap/useBusinessMap';
import useMapGlobal from '../../../../../../common/BusinessMap/useMapGlobal';
import LittleTitle from '../../../../../../common/LittleTitle';
import * as echarts from 'echarts';
import CztApi from '../../../../../../../utils/apis/CztApi';
import ScrollTable from '../../../../../../common/ScrollTable';
import { navByWkt } from '../../../../../../../utils/helper/mapHelper';
import FxqyApi from '../../../../../../../utils/apis/FxqyApi';
import EChartsReact from 'echarts-for-react';

export default function Yhdzzt(props) {
    const [visiable, setVisiable] = useState(true);


    const [datas, setDatas] = useState()
    //按名称分类别
    const [yhlx, setYhlx] = useState("地灾")
    const [chartData, setchartData] = useState();
    const [xAxisData, setXAxisData] = useState();
    const [yAxisData, setYAxisData] = useState();
    useEffect(() => {
        FxqyApi.count_yh(yhlx).then(resp => {
            setDatas(resp.data)
            const chartData = resp.data.map(item => ({
                value: item.count,
                name: item.mc
            }));
            setchartData(chartData);
            const xAxisData = resp.data.map(item => item.count);
            setXAxisData(xAxisData);
            console.log('x:', xAxisData)
            const yAxisData = resp.data.map(item => item.mc);
            setYAxisData(yAxisData);
            console.log('y:', yAxisData)
        });
    }, [yhlx])


    const option = {
        grid: { containLabel: true },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        xAxis: {
            type: 'value',
            axisLabel: {
                color: '#fff'
            }
        },
        yAxis: {
            type: 'category',
            data: yAxisData,
            axisLabel: {
                color: '#fff'
            }
        },
        series: [
            {
                data: xAxisData,
                type: 'bar',
                encode: {
                    x: 'value',
                    y: 'category'
                },
                barWidth: 15,
                itemStyle: {
                    color: '#6495ED'
                }
            },
        ],

    }
    const theme = {
        color: '#fff'
    }
    return <>
        {
            visiable && (
                <div style={{
                    position: 'absolute',
                    right: '10px',
                    width: '300px',
                    top: '30px',
                    bottom: '20px',
                    pointerEvents: 'auto',
                    borderRadius: 8,
                }} className="layout-v">
                    <DarkCard style={{
                        position: 'absolute',
                        right: '1px',
                        width: '300px',
                        top: '0px',
                        bottom: '20px',
                        pointerEvents: 'auto',
                        borderRadius: 8,
                    }} className="layout-v">
                        <div style={{
                            fontSize: 20,
                            fontWeight: "bold",
                            borderBottom: "1px solid #eee",
                            paddingBottom: 12,
                            marginBottom: 12
                        }} className='layout-h center'>
                            <div className='fill w0'>区域统计</div>
                            <div>
                                <Button style={{

                                    background: "#00000000"
                                }} size="small" icon={<CloseOutlined />} onClick={e => setVisiable(false)} />
                            </div>
                        </div>
                        <div className='fill layout-v'>
                            < EChartsReact option={option} style={{
                                height: '90%',
                                width: "100%",
                            }} theme={theme} echarts={echarts}
                            />
                        </div>
                    </DarkCard >
                </div>
            )
        }


    </>

}